<template>
	<div class="content" v-if="dialogVisible">
		<el-dialog title="插入场景变量信息" :visible.sync="dialogVisible" :destroy-on-close="true" :before-close="onClose" width="500px" custom-class="add-attribute" append-to-body>
			<el-form ref="form" label-position="left" v-show="!isShowForm">
				<span class="title">请选择插入场景变量信息</span>
				<el-tabs v-model="activeName" @tab-click="handleClick" class="message-text">
					<el-tab-pane label="客户信息" name="customer" class="customer-box">
						<el-form-item label="">
							<div class="role-box">
								<span class="role-text">角色：</span>
								<el-tag v-for="item in roleData" :key="item.id" class="role-tag" :class="{ activeTag: activeTag === item.id }" @click="checkRole(item.id)">{{ item.name }}</el-tag>
							</div>
							<el-form-item label-position="left" label-width="0px">
								<el-radio-group v-model="attribute" class="radio">
									<el-radio v-for="item in userVariablesList" :label="item.name" :key="item.id">
										{{ item.name }}
									</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-form-item>
					</el-tab-pane>
					<el-tab-pane label="业务信息" name="business" v-if="!hiddenBusinessData">
						<el-form-item label-position="left" label-width="0px">
							<el-radio-group v-model="attributeBusiness" class="radio">
								<el-radio v-for="item in businessData" :label="item.name" :key="item.id">
									{{ item.name }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-tab-pane>
				</el-tabs>

				<p class="error-text" v-show="isShoeErrorSelectText">请选择插入的用户属性</p>
			</el-form>
			<p class="global-text" v-show="isShowRemarkText">请在全局配置处配置变量</p>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="onOk">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { getAllRole, getVariablesByDisabled, getBusinessVariables } from '@/api/api.js';
export default {
	name: 'UserAttribute',
	components: {},
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		},
		taskId: {
			type: String,
			default: () => '',
			required: true
		},
		selectId: {
			type: String,
			default: () => '',
			required: false
		},
		hiddenBusinessData: {
			type: Boolean,
			default: false,
			required: false
		}
	},
	data() {
		return {
			attribute: null,
			userVariablesList: [],
			pageData: {
				page: 1,
				pageSize: 100,
				total: 0
			},
			isShowRemarkText: false,
			initMode: '',
			isShowForm: false,
			isShoeErrorSelectText: false,
			roleData: [],
			activeTag: 1,
			activeName: 'customer',
			scenId: JSON.parse(sessionStorage.getItem('sceneData'))?.id || this.$route.params.scenId,
			businessData: [],
			attributeBusiness: null
		};
	},
	mounted() {
		// console.error(this.taskId, 'interfaceCallTaskId', this.taskId.includes('interfaceCall'));
		this.initAllRole();
		// this.initcustomerData();
		this.initBusinessData();
		console.log('this.selectId', this.selectId, this.hiddenBusinessData);
	},
	methods: {
		// 初始化所有角色
		initAllRole() {
			getAllRole(this.scenId)
				.then(res => {
					this.activeTag = res.data.data[0]?.id;
					this.roleData = res.data.data;
					console.warn(this.roleData[0].id, this.roleData);
					console.log(this.activeTag, 'activeTag');
					if (this.activeTag) {
						this.initcustomerData(this.activeTag);
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 客户信息变量配置初始化
		initcustomerData(id) {
			// console.log(this.roleData);
			let data = {
				scenId: this.scenId,
				roleId: id || this.activeTag,
				pageSize: 100000,
				page: 1,
				isDisabled: false
			};
			getVariablesByDisabled(data)
				.then(res => {
					console.log(res.data.data, 'initcustomerData');
					if (this.taskId.includes('interfaceCall')) {
						this.userVariablesList = res.data.data.data.filter(item => item.initMode !== 'api-data');
					} else {
						this.userVariablesList = res.data.data.data;
					}
					console.log('userVariablesList', this.userVariablesList);
					if (this.selectId) {
						this.attribute = this.userVariablesList.find(item => item.id === this.selectId)?.name;
					}
				})
				.catch(err => {
					console.log(err);
					this.$message.error('获取客户信息变量列表失败！');
				});
		},
		// 客户信息变量配置初始化
		initBusinessData() {
			getBusinessVariables({ scenId: this.scenId, page: this.page, pageSize: this.pageSize })
				.then(res => {
					console.log(res.data.data, 'initBusinessData');
					if (this.taskId.includes('interfaceCall')) {
						this.businessData = res.data.data.data.filter(item => item.initMode !== 'api-data');
					} else {
						this.businessData = res.data.data.data;
					}
					console.log('businessData', this.businessData);
					if (this.selectId) {
						this.attributeBusiness = this.businessData.find(item => item.id === this.selectId)?.name;
					}
				})
				.catch(err => {
					console.log(err);
					this.$message.error('获取客户信息变量列表失败！');
				});
		},
		onClose() {
			this.$emit('on-cancel');
		},
		onOk() {
			const { attribute, userVariablesList, businessData, attributeBusiness } = this;
			const current = userVariablesList.find(currentValue => {
				if (currentValue.name === attribute) {
					return true;
				}
			});
			const currentBuiness = businessData.find(currentValue => {
				if (currentValue.name === attributeBusiness) {
					return true;
				}
			});
			if (!current && !currentBuiness) {
				// this.$emit('on-ok', current, currentBuiness);
				this.isShoeErrorSelectText = true;
			} else {
				console.log('current', current, currentBuiness);
				this.$emit('on-ok', current, currentBuiness);
				this.isShoeErrorSelectText = false;
			}
			// console.warn('currentBuiness：', current, currentBuiness);
		},
		checkRole(id) {
			this.activeTag = id;
			// console.warn(id, 'activeTag');
			this.attribute = null;
			this.initcustomerData(this.activeTag);
		}
	}
};
</script>

<style scoped lang="less">
.radio {
	width: 100%;
	font-size: 13px;
	margin: 20px;
}

.content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	background: rgba(255, 255, 255, 1);
	box-shadow: 5px 7px 49px 5px rgba(44, 137, 234, 0.13);
}

.t {
	height: 20px;
	font-size: 13px;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
	line-height: 20px;
	margin-top: 10px;
	text-align: left;
	align-self: flex-start;
	margin-left: 10px;
}
.global-text {
	color: #b8b8b8;
	margin-top: 10px;
}
.error-text {
	color: #ef5753;
	margin-top: 10px;
}
.add-attribute {
	.title {
		font-size: 13px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: 10px;
	}
	.message-text {
		margin-top: 5px;
		margin-left: 10px;
	}
	.role-box {
		margin: 5px 0 0 10px;
		.role-text {
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		.role-tag {
			height: 32px;
			background: #ffffff;
			border-radius: 4px;
			color: #6784f2;
			margin: 0 7px;
			cursor: pointer;
		}
		.activeTag {
			height: 32px;
			border-radius: 4px;
			background-color: #e7f2fe;
			color: #5374f2;
			margin: 0 7px;
			cursor: pointer;
		}
	}

	/deep/ .el-tabs__nav-wrap::after {
		background-color: none !important;
		position: relative;
		height: 0;
	}
}
</style>
<style>
.add-attribute .el-form-item__content {
	display: block;
	margin: 0 !important;
}
.add-attribute .el-form-item {
	padding: 0;
}
.add-attribute .el-radio-group {
	display: flex;
	flex-direction: column;
	text-align: left;
}
.add-attribute .el-radio {
	line-height: 30px;
}
.add-attribute .el-dialog__body {
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	display: flex;
	overflow-y: auto;
	height: 320px;
}
.add-attribute .el-tabs__active-bar {
	background-color: #6384fe !important;
}
.add-attribute .el-tabs__item {
	font-size: 15px;
	font-family: PingFang SC;
	font-weight: 400;
	color: #b7b7b7 !important;
}
.add-attribute .el-tabs__item.is-active {
	color: #6384fe !important;
}

.add-attribute .el-tabs__nav-wrap::after {
	background-color: none !important;
	position: relative;
	height: 0;
}
</style>
